<template lang="pug">
  ModuleWrapper(title="水果产量及产值" flex="1")
    .more(slot="filter" @click="$emit('onMoreClick')") 更多
    .chart-wrap(ref="chart")
</template>

<script>
export default {
  name: "ModulePopulation",
  data() {
    return {
      chart: null,
      xAxisData: [2016, 2017, 2018, 2019, 2020 ]
    }
  },
  methods: {
    renderChart() {
      this.chart = this.$echarts.init(this.$refs['chart']);
      this.chart.setOption({
        color: ['#1860d0', '#45c761', '#1bd8bb', '#8ad10c', ],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['产量', '种植面积'],
          textStyle: {
            color: '#FFF',
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: this.xAxisData,
        },
        yAxis: [
          {
            type: 'value',
            name: '产量（万吨）',
            min: 0,
            max: 5,
            interval: 1,
            splitLine: {
              lineStyle: {
                color: ['rgba(255, 255, 255, .25)']
              }
            }
          },
          {
            type: 'value',
            name: '种植面积（万亩)',
            min: 0,
            max: 15,
            interval: 3,
            splitLine: {
              lineStyle: {
                color: ['rgba(255, 255, 255, .25)']
              }
            }
          }
        ],
        series: [
          {
            name: '产量',
            type: 'bar',
            data: [3.15, 3.72, 3.69, 0, 4.1]
          },
          {
            name: '种植面积',
            type: 'bar',
            yAxisIndex: 1,
            data: [10.33, 10.7, 10.6, 0, 10.7]
          },
        ]
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.renderChart();
    });
  }
}
</script>

<style lang="scss" scoped>
.module{
  display: flex;
  flex-direction: column;
  .chart-wrap{
    flex: 1;
  }
  .more{
    @include fontSie(18);
    margin-right: rem(20);
    color: #05FDBB;
    cursor: pointer;
  }
}
</style>
